chore(atomic): migrate atomic-insight-generated-answer to Lit#6934

Open

y-lakhdar wants to merge 15 commits intomainfrom

Contributor

y-lakhdar commented Jan 8, 2026 •

edited

Loading

✅ Checklist

https://coveord.atlassian.net/browse/KIT-5267


          first try

f4d9469

y-lakhdar had a problem deploying to PR Artifacts

January 8, 2026 21:05

— with

GitHub Actions Failure

y-lakhdar had a problem deploying to PR Artifacts

January 8, 2026 21:05

— with

GitHub Actions Failure

y-lakhdar had a problem deploying to PR Artifacts

January 8, 2026 21:05

— with

GitHub Actions Failure

y-lakhdar added new-lit-component chromatic labels

y-lakhdar had a problem deploying to Prerelease (CDN)

January 8, 2026 21:06

— with

GitHub Actions Failure


          Merge branch 'main' into KIT-5267

6658bbe

y-lakhdar had a problem deploying to PR Artifacts

January 9, 2026 16:50

— with

GitHub Actions Failure

y-lakhdar had a problem deploying to PR Artifacts

January 9, 2026 16:50

— with

GitHub Actions Failure

y-lakhdar had a problem deploying to PR Artifacts

January 9, 2026 16:50

— with

GitHub Actions Failure

y-lakhdar had a problem deploying to Prerelease (CDN)

January 9, 2026 16:51

— with

GitHub Actions Failure


          Merge branch 'main' into KIT-5267

ab3400a

y-lakhdar had a problem deploying to PR Artifacts

January 14, 2026 14:41

— with

GitHub Actions Failure

y-lakhdar had a problem deploying to PR Artifacts

January 14, 2026 14:41

— with

GitHub Actions Failure

y-lakhdar had a problem deploying to PR Artifacts

January 14, 2026 14:41

— with

GitHub Actions Failure

y-lakhdar had a problem deploying to Prerelease (CDN)

January 14, 2026 14:42

— with

GitHub Actions Failure


          merge

cf2a5c9

y-lakhdar temporarily deployed to pr-workflows

February 4, 2026 19:23

— with

GitHub Actions Inactive

y-lakhdar had a problem deploying to PR Artifacts

February 4, 2026 19:23

— with

GitHub Actions Failure

y-lakhdar had a problem deploying to PR Artifacts

February 4, 2026 19:23

— with

GitHub Actions Failure

y-lakhdar had a problem deploying to PR Artifacts

February 4, 2026 19:23

— with

GitHub Actions Failure

coveo-code-areas-pr-checks bot added area:atomic area:documentation area:e2e-tests area:insight area:node-dependencies team:dev-writers team:dxui team:knowledge-ui-kit-reviewers labels

y-lakhdar temporarily deployed to pr-workflows

February 5, 2026 19:22

— with

GitHub Actions Inactive

y-lakhdar temporarily deployed to PR Artifacts

February 5, 2026 19:22

— with

GitHub Actions Inactive

y-lakhdar temporarily deployed to PR Artifacts

February 5, 2026 19:22

— with

GitHub Actions Inactive

y-lakhdar temporarily deployed to PR Artifacts

February 5, 2026 19:22

— with

GitHub Actions Inactive

y-lakhdar temporarily deployed to Prerelease (CDN)

February 5, 2026 19:27

— with

GitHub Actions Inactive

y-lakhdar temporarily deployed to PR Artifacts

February 5, 2026 19:33

— with

GitHub Actions Inactive

y-lakhdar marked this pull request as ready for review

February 5, 2026 19:52

y-lakhdar requested review from a team, Copilot, fbeaudoincoveo, jpmarceau, jsmith2-coveo, lavoiesl, louis-bompart, npushkarskii and tbaxter-coveo

February 5, 2026 19:52

Copilot AI reviewed

View reviewed changes

Contributor

Copilot AI left a comment

Pull request overview

This PR migrates the atomic-insight-generated-answer component from Stencil to Lit as part of the ongoing framework migration. The component uses Coveo ML models to automatically generate answers to user queries in the Insight Panel context.

Changes:

Migrated component implementation from Stencil (.tsx) to Lit (.ts)
Added comprehensive unit tests and E2E tests for the migrated component
Updated Storybook documentation with MDX file and new stories
Added necessary test fixtures and utilities for the Insight generated answer controller

Reviewed changes

Copilot reviewed 15 out of 17 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
`atomic-insight-generated-answer.tsx`	Removed legacy Stencil implementation
`atomic-insight-generated-answer.ts`	New Lit-based implementation with same functionality
`atomic-insight-generated-answer.spec.ts`	Comprehensive unit tests covering all component features
`atomic-insight-generated-answer.new.stories.tsx`	Storybook stories for visual testing
`atomic-insight-generated-answer.mdx`	Documentation with usage examples
`e2e/atomic-insight-generated-answer.e2e.ts`	E2E tests for citation behavior and popover interactions
`e2e/page-object.ts`	Page object model for E2E testing
`e2e/fixture.ts`	Test fixture setup
`generated-answer-controller.ts`	Test fixture for mocking the headless controller
`mock.ts`	Added Insight endpoint for answer generation
`atomic-insight-generated-answer.tw.css.ts`	Tailwind styles (imports from common)
`atomic-insight-generated-answer.pcss`	Removed legacy PostCSS styles
`index.ts`, `lazy-index.ts`	Added exports for the new component
`custom-element-tags.ts`	Registered component tag

...c/components/insight/atomic-insight-generated-answer/atomic-insight-generated-answer.spec.ts Outdated Show resolved Hide resolved

...ic/src/components/insight/atomic-insight-generated-answer/atomic-insight-generated-answer.ts Show resolved Hide resolved

...c/components/insight/atomic-insight-generated-answer/atomic-insight-generated-answer.spec.ts Outdated Show resolved Hide resolved

y-lakhdar and others added 2 commits

February 5, 2026 14:54


          Update packages/atomic/src/components/insight/atomic-insight-generate…

e50eaf9

…d-answer/atomic-insight-generated-answer.spec.ts

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>


          Update packages/atomic/src/components/insight/atomic-insight-generate…

93686d8

…d-answer/atomic-insight-generated-answer.spec.ts

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

y-lakhdar temporarily deployed to PR Artifacts

February 5, 2026 19:55

— with

GitHub Actions Inactive

y-lakhdar temporarily deployed to PR Artifacts

February 5, 2026 19:55

— with

GitHub Actions Inactive

y-lakhdar temporarily deployed to PR Artifacts

February 5, 2026 19:55

— with

GitHub Actions Inactive

y-lakhdar temporarily deployed to pr-workflows

February 5, 2026 19:55

— with

GitHub Actions Inactive

y-lakhdar temporarily deployed to Prerelease (CDN)

February 5, 2026 20:00

— with

GitHub Actions Inactive

y-lakhdar temporarily deployed to PR Artifacts

February 5, 2026 20:05

— with

GitHub Actions Inactive

louis-bompart reviewed

View reviewed changes

...ic/src/components/insight/atomic-insight-generated-answer/atomic-insight-generated-answer.ts

+                @errorGuard()
+                render() {
+                  const contentClasses =
+                    'mx-auto mt-0 mb-4 border border-neutral shadow-lg p-6 bg-background rounded-lg p-6 text-on-background';

Collaborator

louis-bompart Feb 6, 2026

I think we might have done some changes/fix in the CSS. Double check the current version on main (cc. @SimonMilord ?)

Contributor

fbeaudoincoveo Feb 10, 2026

We're duplicating p-6 in the string.

Also, in the "search" version of the component we have:

'mx-auto mt-0 mb-4 border border-neutral shadow-lg bg-background rounded-lg text-on-background'

So, no p-6 at all.

I think renderAnswerContent should already handle internal padding with px-6 and py-3 (in the header) and px-6 and pb-6 (in the content container), so the p-6 we're adding to the outer

element here would create double padding.

fbeaudoincoveo approved these changes

View reviewed changes

...ic/src/components/insight/atomic-insight-generated-answer/atomic-insight-generated-answer.ts

+                        </div>
+                      `;
+                    }
+                    return html`${nothing}`;

Contributor

fbeaudoincoveo Feb 10, 2026

Suggested change

      
                  return html`${nothing}`;
          
                  return nothing;

...ic/src/components/insight/atomic-insight-generated-answer/atomic-insight-generated-answer.ts

+                @errorGuard()
+                render() {
+                  const contentClasses =
+                    'mx-auto mt-0 mb-4 border border-neutral shadow-lg p-6 bg-background rounded-lg p-6 text-on-background';

Contributor

fbeaudoincoveo Feb 10, 2026

We're duplicating p-6 in the string.

Also, in the "search" version of the component we have:

'mx-auto mt-0 mb-4 border border-neutral shadow-lg bg-background rounded-lg text-on-background'

So, no p-6 at all.

I think renderAnswerContent should already handle internal padding with px-6 and py-3 (in the header) and px-6 and pb-6 (in the content container), so the p-6 we're adding to the outer

element here would create double padding.

...ic/src/components/insight/atomic-insight-generated-answer/atomic-insight-generated-answer.ts

+                  });
+                }
+                private renderContent() {

Contributor

fbeaudoincoveo Feb 10, 2026

The private method is kind of useless :D We could call renderAnswerContent directly.

...ic/src/components/insight/atomic-insight-generated-answer/atomic-insight-generated-answer.ts

+                  attribute: 'disable-citation-anchoring',
+                  converter: booleanConverter,
+                })
+                disableCitationAnchoring = false;

Contributor

fbeaudoincoveo Feb 10, 2026

We're testing the disableCitationAnchoring default value + behavior in the spec file for the "search" version of the component and we're not in the "insight" version.

...ic/src/components/insight/atomic-insight-generated-answer/atomic-insight-generated-answer.ts

+                  if (this.hasNoAnswerGenerated) {
+                    if (
+                      this.generatedAnswerState?.cannotAnswer &&

Contributor

fbeaudoincoveo Feb 10, 2026

This rendering path (where connotAnswer and hasCustomNoAnswerMessage are true) is not covered in the unit tests

It's not covered in the "search" version's tests either, so if you decide to add tests for this you should probably go back in atomic-generated-answer.spec.ts as well for good measure.

...c/components/insight/atomic-insight-generated-answer/atomic-insight-generated-answer.spec.ts

+                  expect(feedbackButtons.length).toBe(0);
+                });
+                it('should render feedback buttons when not streaming and answer exists', async () => {

Contributor

fbeaudoincoveo Feb 10, 2026

This test is semantically identical to "should render the feedback buttons when not streaming". It doesn't really add any value, so we could remove it.

...c/components/insight/atomic-insight-generated-answer/atomic-insight-generated-answer.spec.ts

+                // TODO V4: KIT-5197 - Remove this test
+                it('should log validation warning when maxCollapsedHeight is updated to invalid value', async () => {
+                  const consoleWarnSpy = vi

Contributor

fbeaudoincoveo Feb 10, 2026

We can use the mockConsole util instead.

...c/components/insight/atomic-insight-generated-answer/atomic-insight-generated-answer.spec.ts

+                });
+                it('should warn when maxCollapsedHeight is out of range', async () => {
+                  vi.spyOn(console, 'warn').mockImplementation(() => {});

Contributor

fbeaudoincoveo Feb 10, 2026

we're not asserting that 'warn' was called, only spying on it 😁

...omponents/insight/atomic-insight-generated-answer/e2e/atomic-insight-generated-answer.e2e.ts

+                  test('should render citation when available', async ({generatedAnswer}) => {
+                    const citationCount = await generatedAnswer.getCitationCount();
+                    expect(citationCount).toBeGreaterThan(0);

Contributor

fbeaudoincoveo Feb 10, 2026

We could check for the exact expected count instead of greater than 0... but that's a minor issue.

We do this in a few places in the spec file.

...c/components/insight/atomic-insight-generated-answer/atomic-insight-generated-answer.spec.ts

+                    searchStatusState: {hasError: false},
+                  });
+                  if (retryButton) {

Contributor

fbeaudoincoveo Feb 10, 2026

The test will silently pass if retryButton is falsy.

We should check with an assertion that it's in the document.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

louis-bompart louis-bompart left review comments

Copilot code review Copilot Copilot left review comments

fbeaudoincoveo fbeaudoincoveo approved these changes

lavoiesl Awaiting requested review from lavoiesl lavoiesl was automatically assigned from coveo/dxui

jpmarceau Awaiting requested review from jpmarceau jpmarceau was automatically assigned from coveo/dev-writers

npushkarskii Awaiting requested review from npushkarskii npushkarskii was automatically assigned from coveo/dev-writers

jsmith2-coveo Awaiting requested review from jsmith2-coveo jsmith2-coveo was automatically assigned from coveo/dev-writers

tbaxter-coveo Awaiting requested review from tbaxter-coveo tbaxter-coveo was automatically assigned from coveo/dev-writers

At least 1 approving review is required to merge this pull request.

Labels

area:atomic area:documentation area:e2e-tests area:insight area:node-dependencies chromatic new-lit-component team:dev-writers team:dxui team:knowledge-ui-kit-reviewers team:search-qa